Navigasi Service Worker Frontend: Mencegat Pemuatan Halaman untuk Pengalaman Pengguna yang Ditingkatkan

Service Worker adalah teknologi canggih yang memungkinkan Anda mencegat permintaan jaringan, menyimpan sumber daya dalam cache, dan menyediakan fungsionalitas offline untuk aplikasi web. Salah satu kapabilitas yang paling berdampak adalah mencegat permintaan pemuatan halaman, memungkinkan Anda meningkatkan performa dan pengalaman pengguna secara dramatis. Artikel ini akan menjelajahi bagaimana Service Worker menangani permintaan navigasi, memberikan contoh praktis dan wawasan yang dapat ditindaklanjuti bagi para pengembang.

Memahami Permintaan Navigasi

Sebelum masuk ke dalam kode, mari kita definisikan apa itu "permintaan navigasi" dalam konteks Service Worker. Permintaan navigasi adalah permintaan yang diprakarsai oleh pengguna yang menavigasi ke halaman baru atau menyegarkan halaman saat ini. Permintaan ini biasanya dipicu oleh:

• Mengeklik tautan (tag <a>)
• Mengetik URL di bilah alamat
• Menyegarkan halaman
• Menggunakan tombol kembali atau maju pada browser

Service Worker memiliki kemampuan untuk mencegat permintaan navigasi ini dan menentukan bagaimana permintaan tersebut ditangani. Hal ini membuka kemungkinan untuk mengimplementasikan strategi caching yang canggih, menyajikan konten dari cache saat pengguna offline, dan bahkan menghasilkan halaman secara dinamis di sisi klien.

Mendaftarkan Service Worker

Langkah pertama adalah mendaftarkan Service Worker. Hal ini biasanya dilakukan di file JavaScript utama Anda:

            
if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('/service-worker.js')
    .then(registration => {
      console.log('Service Worker terdaftar dengan lingkup:', registration.scope);
    })
    .catch(error => {
      console.error('Pendaftaran Service Worker gagal:', error);
    });
}

            

              
                Copy
              
            
          

Kode ini memeriksa apakah browser mendukung Service Worker dan, jika ya, mendaftarkan file /service-worker.js. Pastikan JavaScript ini berjalan pada konteks yang aman (HTTPS) untuk lingkungan produksi.

Mencegat Permintaan Navigasi di Service Worker

Di dalam file service-worker.js Anda, Anda dapat mendengarkan event fetch. Event ini dipicu untuk setiap permintaan jaringan yang dibuat oleh aplikasi Anda, termasuk permintaan navigasi. Kita dapat memfilter permintaan ini untuk menangani permintaan navigasi secara spesifik.

            
self.addEventListener('fetch', event => {
  if (event.request.mode === 'navigate') {
    event.respondWith(async () => {
      try {
        // Pertama, coba gunakan respons pramuat navigasi jika didukung.
        const preloadResponse = await event.preloadResponse;
        if (preloadResponse) {
          return preloadResponse;
        }

        // Selalu coba jaringan terlebih dahulu.
        const networkResponse = await fetch(event.request);
        return networkResponse;
      } catch (error) {
        // catch hanya dipicu jika ada pengecualian yang dilemparkan, yang kemungkinan
        // disebabkan oleh kesalahan jaringan.
        // Jika pengambilan file HTML gagal, cari cadangan.
        console.log('Pengambilan gagal; mengembalikan halaman offline sebagai gantinya.', error);

        const cache = await caches.open(CACHE_NAME);
        const cachedResponse = await cache.match(OFFLINE_URL);
        return cachedResponse || createErrorResponse(); // Cadangan jika halaman offline tidak tersedia
      }
    });
  }
});

            

              
                Copy
              
            
          

Mari kita bedah kode ini:

• event.request.mode === 'navigate': Kondisi ini memeriksa apakah permintaan tersebut adalah permintaan navigasi.
• event.respondWith(): Metode ini memberitahu browser bagaimana menangani permintaan. Metode ini menerima sebuah promise yang akan resolve menjadi objek Response.
• event.preloadResponse: Ini adalah mekanisme yang disebut Navigation Preload. Jika diaktifkan, ini memungkinkan browser untuk mulai mengambil permintaan navigasi sebelum Service Worker sepenuhnya aktif. Ini memberikan peningkatan kecepatan dengan menumpang tindih waktu startup Service Worker dengan permintaan jaringan.
• fetch(event.request): Ini mengambil sumber daya dari jaringan. Jika jaringan tersedia, halaman akan dimuat dari server seperti biasa.
• caches.open(CACHE_NAME): Ini membuka cache dengan nama yang ditentukan (CACHE_NAME perlu didefinisikan di tempat lain di file Service Worker Anda).
• cache.match(OFFLINE_URL): Ini mencari respons yang di-cache yang cocok dengan OFFLINE_URL (misalnya, halaman offline).
• createErrorResponse(): Ini adalah fungsi kustom yang mengembalikan respons kesalahan. Anda dapat menyesuaikan fungsi ini untuk memberikan pengalaman offline yang ramah pengguna.

Strategi Caching untuk Permintaan Navigasi

Contoh sebelumnya mendemonstrasikan strategi dasar network-first. Namun, Anda dapat mengimplementasikan strategi caching yang lebih canggih tergantung pada kebutuhan aplikasi Anda.

Jaringan Dahulu, Beralih ke Cache

Ini adalah strategi yang ditunjukkan pada contoh sebelumnya. Strategi ini mencoba mengambil sumber daya dari jaringan terlebih dahulu. Jika permintaan jaringan gagal (misalnya, pengguna offline), maka akan beralih ke cache. Ini adalah strategi yang baik untuk konten yang sering diperbarui.

Cache Dahulu, Memperbarui di Latar Belakang

Strategi ini memeriksa cache terlebih dahulu. Jika sumber daya ditemukan di cache, sumber daya tersebut akan segera dikembalikan. Di latar belakang, Service Worker memperbarui cache dengan versi terbaru dari sumber daya dari jaringan. Ini memberikan pemuatan awal yang cepat dan memastikan bahwa pengguna pada akhirnya selalu memiliki konten terbaru.

            
self.addEventListener('fetch', event => {
  if (event.request.mode === 'navigate') {
    event.respondWith(
      caches.match(event.request)
        .then(cachedResponse => {
          if (cachedResponse) {
            // Perbarui cache di latar belakang.
            event.waitUntil(
              fetch(event.request).then(response => {
                return caches.open(CACHE_NAME).then(cache => {
                  return cache.put(event.request, response.clone());
                });
              })
            );
            return cachedResponse;
          }

          // Jika tidak ditemukan di cache, ambil dari jaringan.
          return fetch(event.request);
        })
    );
  }
});

            

              
                Copy
              
            
          

Hanya Cache

Strategi ini hanya menyajikan konten dari cache. Jika sumber daya tidak ditemukan di cache, permintaan akan gagal. Ini cocok untuk aset yang diketahui statis dan tersedia secara offline.

Stale-While-Revalidate

Mirip dengan Cache First, tetapi alih-alih memperbarui di latar belakang dengan event.waitUntil, Anda segera mengembalikan respons yang di-cache (jika tersedia) dan *selalu* mencoba mengambil versi terbaru dari jaringan dan memperbarui cache. Pendekatan ini memberikan pemuatan awal yang sangat cepat, karena pengguna mendapatkan versi yang di-cache secara instan, tetapi menjamin bahwa cache pada akhirnya akan diperbarui dengan data terbaru, siap untuk permintaan berikutnya. Ini sangat baik untuk sumber daya yang tidak kritis atau situasi di mana menampilkan informasi yang sedikit usang secara singkat dapat diterima demi kecepatan.

            
self.addEventListener('fetch', event => {
  if (event.request.mode === 'navigate') {
    event.respondWith(
      caches.open(CACHE_NAME).then(cache => {
        return cache.match(event.request).then(cachedResponse => {
          const fetchedResponse = fetch(event.request).then(networkResponse => {
            cache.put(event.request, networkResponse.clone());

            return networkResponse;
          });

          // Kembalikan respons yang di-cache jika ada, jika tidak, tunggu
          // dari jaringan. 
          return cachedResponse || fetchedResponse;
        });
      })
    );
  }
});

            

              
                Copy
              
            
          

Navigation Preload

Navigation Preload adalah fitur yang memungkinkan browser untuk mulai mengambil sumber daya sebelum Service Worker sepenuhnya aktif. Ini dapat secara signifikan meningkatkan performa permintaan navigasi, terutama pada kunjungan pertama ke situs Anda.

Untuk mengaktifkan Navigation Preload, Anda perlu:

1. Mengaktifkannya di event activate pada Service Worker Anda.
2. Memeriksa preloadResponse di event fetch.

            
// Di event activate:
self.addEventListener('activate', event => {
  event.waitUntil(self.registration.navigationPreload.enable());
});

// Di event fetch (seperti yang ditunjukkan pada contoh awal):
self.addEventListener('fetch', event => {
  if (event.request.mode === 'navigate') {
    event.respondWith(async () => {
      const preloadResponse = await event.preloadResponse;
      if (preloadResponse) {
        return preloadResponse;
      }

      // ... sisa logika fetch Anda ...
    });
  }
});

            

              
                Copy
              
            
          

Menangani Skenario Offline

Salah satu manfaat utama menggunakan Service Worker adalah kemampuan untuk menyediakan fungsionalitas offline. Saat pengguna offline, Anda dapat menyajikan versi aplikasi Anda yang di-cache atau menampilkan halaman offline kustom.

Untuk menangani skenario offline, Anda perlu:

1. Menyimpan aset yang diperlukan dalam cache, termasuk HTML, CSS, JavaScript, dan gambar Anda.
2. Di event fetch, tangkap setiap kesalahan jaringan dan sajikan halaman offline yang di-cache.

            
// Definisikan URL halaman offline dan nama cache
const OFFLINE_URL = '/offline.html';
const CACHE_NAME = 'my-app-cache-v1';

// Event install: simpan aset statis dalam cache
self.addEventListener('install', event => {
  event.waitUntil(
    caches.open(CACHE_NAME).then(cache => {
      return cache.addAll([
        '/',
        '/index.html',
        '/style.css',
        '/app.js',
        OFFLINE_URL // Simpan halaman offline dalam cache
      ]);
    })
  );
  self.skipWaiting(); // Segera aktifkan service worker
});

// Event fetch: tangani permintaan navigasi dan fallback offline
self.addEventListener('fetch', event => {
  if (event.request.mode === 'navigate') {
    event.respondWith(async () => {
      try {
        // Pertama, coba gunakan respons pramuat navigasi jika didukung.
        const preloadResponse = await event.preloadResponse;
        if (preloadResponse) {
          return preloadResponse;
        }

        // Selalu coba jaringan terlebih dahulu.
        const networkResponse = await fetch(event.request);
        return networkResponse;
      } catch (error) {
        // catch hanya dipicu jika ada pengecualian yang dilemparkan, yang kemungkinan
        // disebabkan oleh kesalahan jaringan.
        // Jika pengambilan file HTML gagal, cari cadangan.
        console.log('Pengambilan gagal; mengembalikan halaman offline sebagai gantinya.', error);

        const cache = await caches.open(CACHE_NAME);
        const cachedResponse = await cache.match(OFFLINE_URL);
        return cachedResponse || createErrorResponse(); // Cadangan jika halaman offline tidak tersedia
      }
    });
  }
});

function createErrorResponse() {
    return new Response(
        `
Offline
Anda saat ini sedang offline. Silakan periksa koneksi internet Anda.
`, {
            headers: { 'Content-Type': 'text/html' }
        }
    );
}

            

              
                Copy
              
            
          

Kode ini menyimpan halaman offline.html dalam cache selama event install. Kemudian, di event fetch, jika permintaan jaringan gagal (blok catch dieksekusi), ia memeriksa cache untuk halaman offline.html dan mengembalikannya ke browser.

Teknik dan Pertimbangan Tingkat Lanjut

Menggunakan API Penyimpanan Cache Secara Langsung

Objek caches menyediakan API yang kuat untuk mengelola respons yang di-cache. Anda dapat menggunakan metode seperti cache.put(), cache.match(), dan cache.delete() untuk memanipulasi cache secara langsung. Ini memberi Anda kontrol terperinci atas bagaimana sumber daya di-cache dan diambil.

Caching Dinamis

Selain menyimpan aset statis dalam cache, Anda juga dapat menyimpan konten dinamis, seperti respons API. Ini dapat secara signifikan meningkatkan performa aplikasi Anda, terutama untuk pengguna dengan koneksi internet yang lambat atau tidak dapat diandalkan.

Versioning Cache

Penting untuk memberi versi pada cache Anda sehingga Anda dapat memperbarui sumber daya yang di-cache saat aplikasi Anda berubah. Pendekatan umum adalah dengan menyertakan nomor versi dalam CACHE_NAME. Saat Anda memperbarui aplikasi, Anda dapat menaikkan nomor versi, yang akan memaksa browser untuk mengunduh sumber daya baru.

            
const CACHE_NAME = 'my-app-cache-v2'; // Naikkan nomor versi

            

              
                Copy
              
            
          

Anda juga perlu menghapus cache lama untuk mencegahnya menumpuk dan membuang ruang penyimpanan. Anda dapat melakukannya di event activate.

            
self.addEventListener('activate', event => {
  const cacheWhitelist = [CACHE_NAME];

  event.waitUntil(
    caches.keys().then(cacheNames => {
      return Promise.all(
        cacheNames.map(cacheName => {
          if (cacheWhitelist.indexOf(cacheName) === -1) {
            return caches.delete(cacheName);
          }
        })
      );
    })
  );
});

            

              
                Copy
              
            
          

Sinkronisasi Latar Belakang

Service Worker juga menyediakan API Sinkronisasi Latar Belakang (Background Sync API), yang memungkinkan Anda menunda tugas hingga pengguna memiliki koneksi internet yang stabil. Ini berguna untuk skenario seperti mengirimkan formulir atau mengunggah file saat pengguna offline.

Notifikasi Push

Service Worker juga dapat digunakan untuk mengimplementasikan notifikasi push, yang memungkinkan Anda mengirim pesan ke pengguna bahkan saat mereka tidak aktif menggunakan aplikasi Anda. Ini dapat digunakan untuk memberitahu pengguna tentang konten baru, pembaruan, atau peristiwa penting.

Pertimbangan Internasionalisasi (i18n) dan Lokalisasi (L10n)

Saat mengimplementasikan Service Worker di aplikasi global, sangat penting untuk mempertimbangkan internasionalisasi (i18n) dan lokalisasi (L10n). Berikut adalah beberapa aspek kunci:

• Deteksi Bahasa: Implementasikan mekanisme untuk mendeteksi bahasa pilihan pengguna. Ini bisa melibatkan penggunaan header HTTP Accept-Language, pengaturan pengguna, atau API browser.
• Konten yang Dilokalkan: Simpan versi terjemahan dari halaman offline Anda dan konten cache lainnya. Gunakan bahasa yang terdeteksi untuk menyajikan versi yang sesuai. Misalnya, Anda bisa memiliki halaman offline terpisah untuk bahasa Inggris (/offline.en.html), Spanyol (/offline.es.html), dan Prancis (/offline.fr.html). Service Worker Anda kemudian akan secara dinamis memilih file yang benar untuk di-cache dan disajikan berdasarkan bahasa pengguna.
• Pemformatan Tanggal dan Waktu: Pastikan bahwa setiap tanggal dan waktu yang ditampilkan di halaman offline Anda diformat sesuai dengan lokal pengguna. Gunakan API Intl JavaScript untuk tujuan ini.
• Pemformatan Mata Uang: Jika aplikasi Anda menampilkan nilai mata uang, formatlah sesuai dengan lokal dan mata uang pengguna. Sekali lagi, gunakan API Intl untuk pemformatan mata uang.
• Arah Teks: Pertimbangkan bahasa yang dibaca dari kanan ke kiri (RTL), seperti Arab dan Ibrani. Halaman offline dan konten cache Anda harus mendukung arah teks RTL menggunakan CSS.
• Pemuatan Sumber Daya: Muat sumber daya yang dilokalkan secara dinamis (misalnya, gambar, font) berdasarkan bahasa pengguna.

Contoh: Pemilihan Halaman Offline yang Dilokalkan

            
// Fungsi untuk mendapatkan bahasa pilihan pengguna
function getPreferredLanguage() {
  // Ini adalah contoh yang disederhanakan. Dalam aplikasi nyata,
  // Anda akan menggunakan mekanisme deteksi bahasa yang lebih kuat.
  return navigator.language || navigator.userLanguage || 'en';
}

// Definisikan pemetaan bahasa ke URL halaman offline
const offlinePageUrls = {
  'en': '/offline.en.html',
  'es': '/offline.es.html',
  'fr': '/offline.fr.html'
};

// Dapatkan bahasa pilihan pengguna
const preferredLanguage = getPreferredLanguage();

// Tentukan URL halaman offline berdasarkan bahasa pilihan
let offlineUrl = offlinePageUrls[preferredLanguage] || offlinePageUrls['en']; // Gunakan bahasa Inggris sebagai default jika tidak ada yang cocok

// ... sisa kode service worker Anda, menggunakan offlineUrl untuk menyimpan dan menyajikan halaman offline yang sesuai ...

            

              
                Copy
              
            
          

Pengujian dan Debugging

Menguji dan melakukan debugging Service Worker bisa menjadi tantangan. Berikut beberapa tips:

• Gunakan Chrome DevTools: Chrome DevTools menyediakan panel khusus untuk memeriksa Service Worker. Anda dapat menggunakan panel ini untuk melihat status Service Worker Anda, memeriksa sumber daya yang di-cache, dan melakukan debug pada permintaan jaringan.
• Gunakan Service Worker Update on Reload: Di Chrome DevTools -> Application -> Service Workers, Anda dapat mencentang "Update on reload" untuk memaksa service worker diperbarui pada setiap pemuatan ulang halaman. Ini sangat berguna selama pengembangan.
• Hapus Penyimpanan: Terkadang, Service Worker bisa masuk ke dalam keadaan yang buruk. Menghapus penyimpanan browser (termasuk cache) dapat membantu menyelesaikan masalah ini.
• Gunakan Pustaka Pengujian Service Worker: Ada beberapa pustaka yang tersedia yang dapat membantu Anda menguji Service Worker Anda, seperti Workbox.
• Uji di Perangkat Nyata: Meskipun Anda dapat menguji Service Worker di browser desktop, penting untuk menguji di perangkat seluler nyata untuk memastikan bahwa mereka berfungsi dengan benar dalam kondisi jaringan yang berbeda.

Kesimpulan

Mencegat permintaan pemuatan halaman dengan Service Worker adalah teknik yang ampuh untuk meningkatkan pengalaman pengguna aplikasi web. Dengan mengimplementasikan strategi caching, menyediakan fungsionalitas offline, dan mengoptimalkan permintaan jaringan, Anda dapat secara signifikan meningkatkan performa dan keterlibatan. Ingatlah untuk mempertimbangkan internasionalisasi saat mengembangkan untuk audiens global untuk memastikan pengalaman yang konsisten dan ramah pengguna bagi semua orang.

Panduan ini memberikan landasan yang kuat untuk memahami dan mengimplementasikan pencegatan navigasi Service Worker. Seiring Anda terus menjelajahi teknologi ini, Anda akan menemukan lebih banyak cara untuk memanfaatkan kemampuannya untuk menciptakan pengalaman web yang luar biasa.